<template>
  <div class="content-wraper">
    <div class="search-box">
      <el-form label-width="100px" :inline="true">
        <el-form-item label="项目名称">
          <el-input v-model="projectName" />
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
        <el-button type="warning" icon="el-icon-refresh" @click="reset()">重置</el-button>
      </el-form>
    </div>
    <div class="detail">
      <com-table :data="dataList" :columns="columns" :total="total" @pageChange="pageChange">
        <template v-slot:biBidStartTime="{row: {biBidStartTime}}">
          {{ dateFormat(biBidStartTime) }}
        </template>
        <template v-slot:options="{row}">
          <el-button type="success" icon="el-icon-edit-outline" size="mini" @click="displayChart(row)">详情</el-button>
        </template>
      </com-table>
    </div>
    <proProgressReportChart
      :visible="showChart"
      :chart-data="chartData"
      @cancel="showChart = false"
    />
  </div>
</template>

<script>
import { getProjectScheduleReportList } from '@/api/bigManage'
import moment from 'moment'
import { getDictName } from '@/utils/comm'
import { bidInfoMode, bidInfoType, workflowStatus } from '@/utils/dicData'
import proProgressReportChart from './components/proProgressReportChart.vue'
export default {
  name: 'BidInfo',
  components: {
    proProgressReportChart
  },
  data() {
    return {
      showChart: false,
      chartData: [],
      projectName: '',
      getDictName,
      bidInfoMode,
      bidInfoType,
      workflowStatus,
      getProjectScheduleReportList,
      dataList: [],
      total: 0,
      pageParams: {
        pageNum: 1,
        pageSize: 10
      },
      showModal: false,
      optType: 'add',
      unitDetail: {},
      columns: [
        {
          label: '项目名称',
          prop: 'projectName'
        },
        {
          label: '合同金额(元)',
          prop: 'contractAmount'
        },
        {
          label: '累计计划产值(元)',
          prop: 'cumulativePlanOutVal'
        },
        {
          label: '累计完成产值(元)',
          prop: 'cumulativeFinishOutVal'
        },
        {
          label: '计划与实际差额(元)',
          prop: 'difference'
        },
        {
          label: '完成百分比(%)',
          prop: 'percent'
        },
        {
          label: '剩余合同金额(元)',
          prop: 'restContractAmount'
        },
        {
          fixed: 'right',
          label: '操作',
          width: '100',
          prop: 'options',
          slot: 'options'
        }
      ]
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    displayChart(row) {
      this.chartData.push({
        name: '累计完成产值',
        value: row.cumulativeFinishOutVal
      })
      this.chartData.push({
        name: '剩余合同金额',
        value: row.restContractAmount
      })
      this.showChart = true
    },
    dateFormat(data) {
      if (data) {
        return moment(data).format('YYYY-MM-DD')
      } else {
        return ''
      }
    },
    pageChange(data) {
      this.pageParams = data
      this.getDataList()
    },
    getDataList() {
      const params = {
        ...this.pageParams,
        projectName: this.projectName
      }
      getProjectScheduleReportList(params).then((res) => {
        const { data, total } = res.data || {}
        if (data) {
          this.dataList = data
          this.total = total - 0
        }
      })
    },
    search() {
      this.pageParams.pageNum = 1
      this.getDataList()
    },
    reset() {
      this.projectName = ''
    }

  }
}
</script>

<style lang="scss" scoped>
.search-box {
  height: 50px;
}
.detail{
  height: calc(100% - 50px);
}
</style>
